<template>
  <div class="box">
    <div class="Header">
      <van-icon name="arrow-left" @click="go" />题库选择
    </div>

    <div class="com">
      <!-- <input type="text" placeholder="请输入题库名称关键词" v-model="value" />
      <van-icon name="search" class="sou" />-->
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @blur="find(value)"
        shape="round"
        @cancel="onCancel"
      />
    </div>

    <div class="foot" v-if="!show">
      <!-- 左侧 -->
      <div class="left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            @click="add(item.id)"
            :title="item.name"
            v-for="(item,index) in left"
            :key="index"
          />
        </van-sidebar>
      </div>

      <!-- 右侧 -->
      <div class="right">
        <div v-for="(item,index) in right" :key="index">
          <!-- <div class="shang"> -->
          <p>{{item.name}}</p>
          <!-- </div> -->
          <div v-for="i in item.bank" :key="i.id" class="nei">
            <p>{{i.name}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="seach" v-show="show && isShow" v-for="item in arr" :key="item.id">{{item.name}}</div>
    <div v-if="!isShow">空</div>
  </div>
</template>

<script>
import { wjleft, wjright, wjsou } from "../request/http";
import { Icon, Sidebar, SidebarItem, Search } from "vant";
export default {
  components: {
    [Icon.name]: Icon,
    [Sidebar.name]: Sidebar,
    [SidebarItem.name]: SidebarItem,
    [Search.name]: Search
  },
  data() {
    return {
      activeKey: 0,
      left: [],
      right: [],

      value: "",
      isShow: -1,
      show: false,
      arr: []
    };
  },
  created() {},
  mounted() {
    this.getlist();
  },
  methods: {
    go() {
      this.$router.push("/practice");
    },

    getlist() {
      wjleft().then(res => {
        // console.log(res);
        this.left = res;
      });
    },
    add(id) {
      wjright({
        id: id
      }).then(res => {
        // console.log(res);
        this.right = res;
      });
    },
    //搜索
    async find(value) {
      console.log(value);

      const res = await wjsou(value);
      console.log(res);
      this.show = true;
      if (res.length == 0) {
        this.isShow = false;
      } else {
        this.isShow = true;
        this.arr = res;
      }
    },
    //取消搜索
    onCancel() {
      this.show = false;
      this.isShow = true;
    }
  }
};
</script>

<style scoped>
.box {
  /* background: #f0f2f5; */
  width: 100%;
  height: 110%;
  font-size: 12px;
}
.Header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #fff;
  text-align: center;
  color: #5e5959;
  font-size: 18px;
  /* border-bottom: 10px solid #f0f2f5; */
}
.van-icon {
  float: left;
  margin-top: 15px;
}
.com {
  margin-top: 10px;
}
input {
  height: 40px;
  width: 90%;
  background: rgb(229, 226, 226);
  border-radius: 20px;
  margin-left: 10px;
  line-height: 40px;
  border: 0;
  padding: 0 10px;
}
.sou {
  position: absolute;
  right: 30px;
  font-size: 20px;
  top: 55px;
}
.foot {
  margin-top: 10px;
  border-top: 1px solid #ddd;
  display: flex;
}
.right {
  width: 80%;
  margin-left: 10px;
}
.right .nei {
  /* background: #ccc; */
  padding: 2px 20px;
}
.nei p {
  width: 120px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 14px;
  background: #eb6100;
}
.seach {
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  border-bottom: 2px solid #ddd;
}
</style>
